<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link
            rel="stylesheet"
            title="default"
            href="amis-sdk/antd.css"
    />
    <link rel="stylesheet" href="amis-sdk/helper.css"/>
    <link
            rel="stylesheet"
            href="amis-sdk/iconfont.css"
    />
    <script src="amis-sdk/sdk.js"></script>
    <style>
        /* 设置页面的整体样式 */
        body {
            /* 背景使用从上到下的渐变色，颜色从 #a7d9f0（浅蓝色）过渡到 #4871a6（深蓝色） */
            background: linear-gradient(to bottom, #a7d9f0, #4871a6);

            /* 使用 Flexbox 布局，使内容在页面中水平和垂直居中 */
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */

            /* 设置页面的高度为视口高度（100% 的屏幕高度） */
            height: 100vh;

            /* 移除默认的外边距，确保页面没有多余的空白 */
            margin: 0;
        }

        /* 登录容器的样式 */
        .login-container {
            /* 设置背景颜色为白色 */
            background-color: #ffffff;

            /* 增加内边距，使内容与容器边缘有一定的距离 */
            padding: 40px;

            /* 设置圆角边框，使容器看起来更柔和 */
            border-radius: 8px;

            /* 添加阴影效果，使容器有立体感 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

            /* 设置容器的宽度为 400 像素 */
            width: 400px;
        }

        /* 登录容器内标题的样式 */
        .login-container h2 {
            /* 设置标题下方的外边距，与表单内容保持一定距离 */
            margin-bottom: 20px;

            /* 设置标题的字体大小 */
            font-size: 18px;

            /* 将标题文本居中显示 */
            text-align: center;
        }

        /* 登录容器底部区域的样式 */
        .login-container .amis-form-footer {
            /* 使用 Flexbox 布局，使内容在底部区域中水平分布 */
            display: flex;

            /* 将内容在水平方向上均匀分布，两端对齐 */
            justify-content: space-between;

            /* 将内容在垂直方向上居中对齐 */
            align-items: center;
        }

        /* 底部区域中操作按钮容器的样式 */
        .login-container .amis-form-footer .amis-form-actions {
            /* 设置操作按钮容器占据剩余空间 */
            flex: 1;
        }

        /* 操作按钮的样式 */
        .login-container .amis-form-footer .amis-form-actions button {
            /* 设置按钮宽度为 100%，占满父容器的宽度 */
            width: 100%;

            /* 设置按钮的背景颜色为蓝色 */
            background-color: #007bff;

            /* 设置按钮的文本颜色为白色 */
            color: #ffffff;

            /* 移除按钮的默认边框 */
            border: none;

            /* 设置按钮的圆角边框 */
            border-radius: 4px;

            /* 设置按钮的内边距，使文本与按钮边缘有一定的距离 */
            padding: 10px;

            /* 将鼠标指针设置为手型，表示按钮可点击 */
            cursor: pointer;
        }

        /* 鼠标悬停时按钮的样式 */
        .login-container .amis-form-footer .amis-form-actions button:hover {
            /* 改变按钮的背景颜色为深蓝色，提供视觉反馈 */
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div class="login-container">
    <h2 id="system-name">数据采集系统</h2>  <!-- 添加ID用于动态更新 -->
    <div id="root"></div>
</div>
<script type="text/javascript">
    (function () {
        // 先获取系统配置
        fetch('/sys/config')
            .then(response => {
                if (!response.ok) throw new Error('获取配置失败');
                return response.json();
            })
            .then(res => {
                // 更新系统名称显示
                const systemNameEl = document.getElementById('system-name');
                if (systemNameEl) {
                    systemNameEl.textContent = res.data.systemName;
                }
            })
            .catch(error => {
                console.error('获取系统名称失败:', error);
                // 失败时使用默认名称
                document.getElementById('system-name').textContent = '插件管理系统';
            });

        let amis = amisRequire('amis/embed');
        let amisJSON = {
            type: 'page',
            body: {
                type: 'form',
                title: '',
                mode: 'horizontal',
                redirect: "/",
                controls: [
                    {
                        type: 'input-text',
                        name: 'username',
                        label: '登录名',
                        placeholder: '请输入登录名',
                        required: true
                    },
                    {
                        type: 'input-password',
                        name: 'password',
                        label: '密码',
                        placeholder: '请输入密码',
                        required: true
                    },
                    /*{
                        type: 'checkbox',
                        name: 'remember',
                        label: '记住密码'
                    },*/
                    {
                        type: 'button',
                        label: '登录',
                        actionType: 'submit',
                        level: 'primary'
                    }
                ],
                api: {
                    method: 'post',
                    url: '/admin/login',  // 登录接口
                    successRedirect: '/'  // 登录成功后重定向到首页
                }
            }
        };
        let amisScoped = amis.embed('#root', amisJSON, {}, {
            theme: 'antd'
        });
    })();
</script>
</body>
</html>
